import {render,WeElement,define} from "omi"
import "../return_apply/index.css"
import { get, post, loading, hideLoading, toastSuccess,toastErr}  from "../../../utils/util"

import api from "../../../api/api"
import "../../../components/my-picker"    //退款退货组件
import "../../../components/select-picture" //上传图片组件
import "../../../components/select-type"    //换货组件

const app = getApp();

define("return_apply",class extends WeElement{

    config={
        navigationBarTitleText:"申请退款"
    }
    data={
        destination:"",  //判断页面显示内容
        arr_right:require("../../../images/arrows-right.png"),
        camera:require("../../../images/camera.png"),
        isShow:false,        //组件显示
        isPicture:1,
        index:"",      //
        update_pic:"",
        ex_but:"",           //换货商品开关变量
        picurl_list:[],      //上传图片列表
        titl:"请选择",
        return_goods:"",     //货物状态变量
        return_reason:"",    //退款原因变量
        exchange_reason:"",  //换货原因变量
        goods_style:"",      //换货商品变量
        goods_sum:"",        //换货商品数量
        order_sn:"",         //订单号
        order_src:"",        //订单图
        order_pri:"",        //订单价格
        order_name:"",       //订单名
        refund_type_id:"",   //售后类型
        is_pick:1,           //是否提货
        refund_reason_detail:"",//售后原因详情
        goods_state:[
          {
            title:'货物状态',
            content:['未收到货','已收到货'],
            choose:"",
          }, 
          {
            title:'退款原因',
            content:[],
            choose:"",
          }, 
          {
            title:'换货原因',
            content:[],
            choose:"",
          },  

    ],
      address_list: {},
      upload_pic: [],
    }
    //组件内容选择
    change_checked = (e) => {
      this.data.goods_state[this.data.index].choose = e.detail;
      //货物状态
      this.data.index==0&&(this.data.return_goods=this.data.goods_state[0].content[e.detail]);
      //退款原因
      this.data.index==1&&(this.data.return_reason=this.data.goods_state[1].content[e.detail]);
      //换货原因
      this.data.index==2&&(this.data.exchange_reason=this.data.goods_state[2].content[e.detail]);
      console.log(e.detail)
      this.update();
    }
    //组件关闭
    close_picker = (e) => {
      this.data.isShow = e.detail;
      this.data.titl="";
      this.update();
    }
    //组件显示按钮
    butt = () => {
      this.data.isShow = true;
      this.data.index=0;
      this.update();
    }

    //退货换货原因
    reason = () => {
      this.data.destination == "仅退款" && (this.data.index = 1);
      this.data.destination == "退货退款" && (this.data.index = 1);
      this.data.destination == "换货" && (this.data.index = 2);
      this.data.titl="";
      this.data.isShow = true;
      this.update();
    }
    //换货商品按钮
    exchange = () => {
      this.data.ex_but = true;
      this.update();
    }

    //换货商品关闭
    bgnone = (e) => {
      // console.log("e_huan",e.detail);
       this.data.ex_but = false;
      this.data.titl="";
      this.data.goods_style=e.detail.date;
      this.data.goods_sum=e.detail.sum;   
      this.update();
    }

    //获取输入框
    refund_detail=(e)=>{
      // console.log(e.detail.value);
      this.data.refund_reason_detail=e.detail.value;
    }

    //上传凭证图片按钮
    update_pict = () => {
      this.data.isPicture = 0;
      this.data.update_pic = true;
      this.update();
    }

    //上传图片url
    choose = (e) => {
      let _this = this;
        // console.log("e", e.detail.picurl);
        // e.detail.picurl==undefined?"":(this.data.picurl_list.length < 3) ? this.data.picurl_list.push(e.detail.picurl): console.log("111");     
      if (e.detail.picurl){
        if (this.data.picurl_list.length < 3){
          this.data.picurl_list.push(e.detail.picurl);
          loading("上传中...")
          wx.uploadFile({
            url: 'https://yaochiwanback.bluej.cn/api/refund/upload_one_pic',
            filePath: e.detail.picurl,
            name: 'image_file',
            success(res) {
              _this.data.upload_pic.push(JSON.parse(res.data).data.file_name);
              wx.hideLoading();
              console.log(res)
              console.log(_this.data.upload_pic)
            }
          })
        }else{
          toastErr('最多上传3张')
        }
      }  
        this.data.isPicture = e.detail.date;
        this.update();

    }

    //提交售后订单
    create_refund=()=>{
      //判断售后原因
      let reason_info = this.data.return_reason||this.data.exchange_reason;
      // console.log("reason_info",reason_info);
      // console.log("pic",this.data.picurl_list[0]);

      post(api.create_refund,
      {
        order_sn:this.data.order_sn,//订单号
        
        refund_type_id:this.data.refund_type_id,//售后类型，1纯退款，2换货，3退货退款
        
        is_pick:this.data.is_pick,//是否提货，1是0否，默认1
        
        reason_info:reason_info,//售后原因
        
        refund_reason_detail:this.data.refund_reason_detail,//售后原因详情
        
        address_id: this.data.address_list.address_id,//售后地址ID，纯退款不需要
        
        refund_pic1: this.data.upload_pic[0],
        refund_pic2: this.data.upload_pic[1],
        refund_pic3: this.data.upload_pic[2],

        // images:this.data.picurl_list,//凭证图片1,2,3

      }).then((res)=>{
        toastSuccess('提交成功!');
        setTimeout(()=>{
          wx.navigateBack({
            delta: 2
          })
        },1000)
        
        console.log("提交成功",res);
      })


    }
//判断售后类型
    type=()=>{
      this.data.destination == "仅退款" && (this.data.refund_type_id = 1)&&(this.data.is_pick=0);
      this.data.destination == "退货退款" && (this.data.refund_type_id = 3);
      this.data.destination == "换货" && (this.data.refund_type_id = 2);
    }

    //跳转传入的数据
    install(option) {
      console.log("option")
      console.log(option)

      this.data.destination = option.dataset; //接收售后类型
      this.type();
      this.data.order_sn=option.order_sn;   //接收订单号
      this.data.order_src=option.order_src; //接收订单图
      this.data.order_pri=option.order_pri; //接收订单价格
      this.data.order_name=option.order_name;//接收订单名
      console.log("order_sn",this.data.order_sn);

      //判断退换详细页
      this.data.destination == "仅退款" && (this.data.index = 0);
      // console.log("is_pick",this.data.is_pick);

      //获取退换货原因
      get(api.refund_reason).then((res)=>{
        console.log("reason",res.data);
        for(var i = 0 ;i<res.data.length;i++){
          this.data.goods_state[1].content.push(res.data[i].reason_info);
          this.data.goods_state[2].content.push(res.data[i].reason_info);
        }

      })

      //获取默认地址
      get('https://yaochiwanback.bluej.cn/api/refund/get_address_list').then((res) => {
        // console.log(res)
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].address_is_default == '1') {
            this.data.address_list.name = res.data[i].address_realname;
            this.data.address_list.phone = res.data[i].address_mob_phone;
            this.data.address_list.area_info = res.data[i].area_info + " ";
            this.data.address_list.address_detail = res.data[i].address_detail;
            this.data.address_list.address_id = res.data[i].address_id;
          }
        }
        // console.log(this.data.address_list);
        this.update();
      })

      this.update();
    }
//退出页面清除数据
    uninstall(){
        console.log("退出页面");
        this.data.picurl_list=[];
        this.data.return_goods="",     //货物状态变量
        this.data.return_reason="",    //退款原因变量
        this.data.exchange_reason="",  //换货原因变量
        this.data.goods_style="",      //换货商品变量
        this.data.is_pick=1,           //是否提货
        this.data.goods_state[1].content=[],  
        this.data.goods_state[2].content=[],
        this.data.titl="请选择",       
        this.update();

    }

  //选择收货地址
  to_my_address = () => {
    wx.navigateTo({
      url: '../my_shipping_address/index'
    })
  }

  onShow() {
    // console.log('onShow , select_address:')
    // console.log(app.globalData.select_address)
    if (app.globalData.select_address) {
      this.data.address_list.name = app.globalData.select_address.name;
      this.data.address_list.phone = app.globalData.select_address.phone;
      this.data.address_list.area_info = app.globalData.select_address.area_info + " ";
      this.data.address_list.address_detail = app.globalData.select_address.address_detail;
      this.data.address_list.address_id = app.globalData.select_address.address_id;
    }else{
      // console.log(111)
      //获取默认地址
      get('https://yaochiwanback.bluej.cn/api/refund/get_address_list').then((res) => {
        // console.log(res)
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].address_is_default == '1') {
            this.data.address_list.name = res.data[i].address_realname;
            this.data.address_list.phone = res.data[i].address_mob_phone;
            this.data.address_list.area_info = res.data[i].area_info + " ";
            this.data.address_list.address_detail = res.data[i].address_detail;
            this.data.address_list.address_id = res.data[i].address_id;
          }
        }
        // console.log(this.data.address_list);
        this.update();
      })
    }
    this.update();
  }

    render(){
        const{destination,picurl_list} =this.data;

        return(
            <view class="body_box">
            <view class="body">

            <view class="order_box">

            <view class="order_picture">
            <image src={order_src}></image>
            </view>

            <view class="order_cont">
            <view class="cont">
           {order_name}
            </view>
            <view class="order_style">
            其它内容：如房型规格
            </view>
            </view>
            </view>
{destination=="仅退款"?
            <view class="goods_box"  bindtap={this.butt}>
            <view class="reason">货物状况</view>
            <view class="choose_but">
            <view class="choose">
            {this.data.titl}
            {
              this.data.isShow?"":
           this.data.return_goods}
           </view>
            <view class="arrow_right"><image src={arr_right}></image></view> 
            </view>       
            </view>:""}
{destination=="仅退款"||destination=="退货退款"?
            <view class="goods_box" bindtap={this.reason}>
            <view class="reason">退款原因</view>
            <view class="choose_but">
            <view class="choose">
            {this.data.titl}
            {
              this.data.isShow?"":
           this.data.return_reason}
            </view>
            <view class="arrow_right"><image src={arr_right}></image></view> 
            </view>       
            </view>:""}

{destination=="仅退款"||destination=="退货退款"?
            <view class="return_pri">
            <view class="pri_text">退款金额</view>
            <view class="pri">￥{order_pri}</view>
            </view>:""}

{destination=="仅退款"||destination=="退货退款"?          
            <view class="note">最多￥{order_pri}，含发货邮费￥0.00</view>:""} 

{destination=="仅退款"||destination=="退货退款"?  
            <view class="instructions" >
            <view class="inst">退款说明：</view>

            <input class="inst_choose ell" placeholder="选填" bindblur={this.refund_detail}></input>

            </view>:""} 
              {destination =="退货退款"?
            <view class="cust_information" bindtap={to_my_address}>
            <view class="address_cont">收货地址</view>
            <view class="information_box ell">
            <view class="name_phone">
            <view class="name">{this.data.address_list.name}</view>
            <view class="phone">{this.data.address_list.phone}</view>
            </view>
            <view class="address">{this.data.address_list.area_info}{this.data.address_list.address_detail}</view>
            </view>
            <view class="arrow_right"><image src={arr_right}></image></view> 
            </view>:""}

{destination=="换货"?
            <view class="goods_box" bindtap={this.reason}>
            <view class="reason">换货原因</view>
            <view class="choose_but">
            <view class="choose">
            {this.data.titl}
            {
              this.data.isShow?"":
           this.data.exchange_reason}
            </view>
            <view class="arrow_right"><image src={arr_right}></image></view> 
            </view>       
            </view>:""}
{destination=="换货"?
            <view class="goods_box" bindtap={this.exchange}>
            <view class="reason">换货商品</view>
            <view class="choose_but">
            <view class="choose">
            {this.data.titl}
            {
              this.data.ex_but?"":
              this.data.goods_style
            }
            </view>
            <view class="arrow_right"><image src={arr_right}></image></view> 
            </view>       
            </view>:""}
{destination=="换货"?
            <view class="instructions" >
            <view class="inst">退款说明：</view>
            <input class="inst_choose ell" placeholder="选填" bindblur={this.refund_detail}></input>
            </view>:""}

            <view class="credentials_box">            
            <view class="credentials_title">上传凭证</view>
            <view class="img_box">
            {
                this.data.picurl_list&&
                this.data.picurl_list.map((item,index)=>(
                <view class="up_pic" key={index}>
                <image src={picurl_list[index]}></image>
                </view>
               ))
               
            }
            <view class="credentials" bindtap={this.update_pict}>
            <view class="credentials_in">
            <view class="credentials_icon"><image src={camera}></image></view>
            <view class="credentials_cont">最多3张</view>
            </view>           
            </view>            
            </view>              
            </view>

{
            this.data.isShow&&(<my-picker picked={this.data.goods_state[this.data.index]}
            isShow={this.data.isShow} 
            onClosepicker={this.close_picker} 
            onChangechecked={this.change_checked}></my-picker>)
}

            <view class="submit" bindtap={this.create_refund}>提交</view>

{
    this.data.isPicture==0&&<select-picture onChoosetype={this.choose}></select-picture>
}
           
{
    this.data.ex_but&&<select-type onChoosebgnone={this.bgnone}></select-type>
}        
            </view>         
            </view>
        )
    }


})